<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>树洞详情 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #3b82f6;
            --primary-light: #60a5fa;
            --primary-dark: #2563eb;
            --secondary: #ec4899;
            --text-primary: #111827;
            --text-secondary: #6b7280;
            --text-light: #9ca3af;
            --bg-light: #f9fafb;
            --bg-white: #ffffff;
            --border-light: #e5e7eb;
            --radius: 10px;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 1.15rem;
            font-weight: 600;
            text-align: center;
            flex: 1;
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .nav-btn:hover {
            background-color: var(--bg-light);
            color: var(--primary);
        }
        
        /* 树洞详情容器 */
        .post-detail-container {
            background-color: var(--bg-white);
            padding: 16px;
            margin-bottom: 10px;
        }
        
        /* 用户信息 */
        .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .user-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 12px;
        }
        
        .user-name {
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 2px;
        }
        
        .post-meta {
            font-size: 0.8rem;
            color: var(--text-light);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .verify-badge {
            color: var(--primary);
            font-size: 0.9rem;
        }
        
        /* 帖子内容 */
        .post-content {
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 16px;
            color: var(--text-primary);
        }
        
        /* 图片容器 */
        .images-container {
            margin-bottom: 16px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .single-image {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .single-image img {
            width: 100%;
            aspect-ratio: 16/9;
            object-fit: cover;
        }
        
        .multiple-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
        }
        
        .multiple-images.three-images {
            grid-template-columns: repeat(3, 1fr);
        }
        
        .image-item {
            aspect-ratio: 1;
            overflow: hidden;
            position: relative;
        }
        
        .image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 标签 */
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .post-tag {
            padding: 3px 10px;
            background-color: var(--bg-light);
            border-radius: 12px;
            font-size: 0.8rem;
            color: var(--primary);
        }
        
        /* 操作栏 */
        .post-actions {
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 16px;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-secondary);
            font-size: 0.85rem;
            background: none;
            border: none;
            padding: 6px 0;
            transition: var(--transition);
        }
        
        .action-btn:hover {
            color: var(--primary);
        }
        
        .action-btn.liked {
            color: var(--secondary);
        }
        
        /* 作者额外操作 */
        .author-action {
            display: flex;
            justify-content: center;
            margin-bottom: 16px;
        }
        
        .follow-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 6px 20px;
            border-radius: 20px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: var(--transition);
        }
        
        .follow-btn.following {
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        /* 评论区 */
        .comments-section {
            background-color: var(--bg-white);
            padding: 16px;
        }
        
        .comments-title {
            font-size: 1.05rem;
            font-weight: 600;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .comments-count {
            color: var(--text-secondary);
            font-size: 0.9rem;
            font-weight: normal;
        }
        
        /* 评论输入框 */
        .comment-input-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .my-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-input-wrapper {
            flex: 1;
            position: relative;
        }
        
        .comment-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-light);
            border-radius: 20px;
            font-size: 0.9rem;
            background-color: var(--bg-light);
            resize: none;
            height: 40px;
            transition: var(--transition);
        }
        
        .comment-input:focus {
            outline: none;
            border-color: var(--primary-light);
            background-color: white;
        }
        
        .send-comment {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
        }
        
        /* 评论列表 */
        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .comment-item {
            display: flex;
            gap: 10px;
        }
        
        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .comment-content-wrapper {
            flex: 1;
        }
        
        .comment-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }
        
        .comment-author {
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .comment-time {
            font-size: 0.75rem;
            color: var(--text-light);
        }
        
        .comment-content {
            background-color: var(--bg-light);
            padding: 8px 12px;
            border-radius: 16px;
            font-size: 0.9rem;
            margin-bottom: 6px;
        }
        
        .comment-actions {
            display: flex;
            gap: 16px;
            font-size: 0.8rem;
        }
        
        .comment-action {
            color: var(--text-secondary);
            background: none;
            border: none;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .comment-action:hover {
            color: var(--primary);
        }
        
        .comment-action.liked {
            color: var(--secondary);
        }
        
        /* 回复 */
        .replies-container {
            margin-left: 46px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .reply-item {
            display: flex;
            gap: 8px;
        }
        
        .reply-content-wrapper {
            flex: 1;
        }
        
        .reply-content {
            background-color: var(--bg-light);
            padding: 6px 10px;
            border-radius: 14px;
            font-size: 0.85rem;
            margin-bottom: 4px;
        }
        
        .reply-to {
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 回复输入框 */
        .reply-input-container {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        
        .reply-input {
            flex: 1;
            padding: 6px 10px;
            border: 1px solid var(--border-light);
            border-radius: 16px;
            font-size: 0.85rem;
            background-color: var(--bg-light);
        }
        
        .reply-input:focus {
            outline: none;
            border-color: var(--primary-light);
            background-color: white;
        }
        
        .send-reply {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            flex-shrink: 0;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.25rem;
            margin-bottom: 4px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        /* 加载更多评论 */
        .load-more-comments {
            margin: 16px 0 8px;
            padding: 8px;
            text-align: center;
            color: var(--primary);
            font-size: 0.85rem;
            background-color: var(--bg-light);
            border-radius: var(--radius);
            border: none;
            width: 100%;
        }
        
        /* 图片查看器 (默认隐藏) */
        .image-viewer {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.95);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .image-viewer.active {
            display: flex;
        }
        
        .viewer-image {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
        }
        
        .close-viewer {
            position: absolute;
            top: 16px;
            right: 16px;
            color: white;
            background: none;
            border: none;
            font-size: 1.5rem;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">树洞详情</div>
        <button class="nav-btn" id="moreBtn">
            <i class="fas fa-ellipsis-h"></i>
        </button>
    </div>
    
    <!-- 树洞详情 -->
    <div class="post-detail-container">
        <div class="user-info">
            <img src="https://picsum.photos/id/342/100/100" alt="用户头像" class="user-avatar">
            <div>
                <div class="user-name">
                    美食探索家
                    <i class="fas fa-check-circle verify-badge"></i>
                </div>
                <div class="post-meta">
                    <span>3天前</span>
                    <span>·</span>
                    <span>距离1.8km</span>
                </div>
            </div>
        </div>
        
        <div class="post-content">
            周末在家尝试做了三道新菜式：番茄牛腩、蒜蓉粉丝蒸虾和麻婆豆腐，味道都还不错！特别是番茄牛腩，小火慢炖了两个小时，肉质软烂入味，汤汁浓郁，配米饭简直绝了！有没有喜欢做饭的朋友，求交流食谱~
        </div>
        
        <div class="images-container">
            <div class="multiple-images three-images">
                <div class="image-item">
                    <img src="https://picsum.photos/id/292/300/300" alt="番茄牛腩" class="post-image">
                </div>
                <div class="image-item">
                    <img src="https://picsum.photos/id/488/300/300" alt="蒜蓉粉丝蒸虾" class="post-image">
                </div>
                <div class="image-item">
                    <img src="https://picsum.photos/id/312/300/300" alt="麻婆豆腐" class="post-image">
                </div>
            </div>
        </div>
        
        <div class="tags-container">
            <span class="post-tag">#美食</span>
            <span class="post-tag">#家常菜</span>
            <span class="post-tag">#烹饪</span>
            <span class="post-tag">#周末厨房</span>
        </div>
        
        <div class="post-actions">
            <button class="action-btn like-btn">
                <i class="far fa-heart"></i>
                <span>124</span>
            </button>
            <button class="action-btn comment-btn">
                <i class="far fa-comment"></i>
                <span>56</span>
            </button>
            <button class="action-btn share-btn">
                <i class="far fa-share-square"></i>
                <span>分享</span>
            </button>
            <button class="action-btn bookmark-btn">
                <i class="far fa-bookmark"></i>
                <span>收藏</span>
            </button>
        </div>
        
        <div class="author-action">
            <button class="follow-btn">
                <i class="fas fa-plus"></i> 关注
            </button>
        </div>
    </div>
    
    <!-- 评论区 -->
    <div class="comments-section">
        <div class="comments-title">
            评论 <span class="comments-count">(56)</span>
        </div>
        
        <!-- 评论输入框 -->
        <div class="comment-input-container">
            <img src="https://picsum.photos/id/64/100/100" alt="我的头像" class="my-avatar">
            <div class="comment-input-wrapper">
                <textarea class="comment-input" placeholder="分享你的想法..."></textarea>
                <button class="send-comment">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
        
        <!-- 评论列表 -->
        <div class="comments-list">
            <!-- 评论1 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/237/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content-wrapper">
                    <div class="comment-header">
                        <span class="comment-author">咖啡爱好者</span>
                        <span class="comment-time">2天前</span>
                    </div>
                    <div class="comment-content">
                        看起来太美味了！特别是蒜蓉粉丝蒸虾，能分享一下做法吗？我每次做的蒜蓉都不够香
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action like-comment">
                            <i class="far fa-heart"></i> 24
                        </button>
                        <button class="comment-action reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </button>
                    </div>
                    
                    <!-- 评论1的回复 -->
                    <div class="replies-container">
                        <!-- 作者回复 -->
                        <div class="reply-item">
                            <img src="https://picsum.photos/id/342/100/100" alt="回复者头像" class="comment-avatar">
                            <div class="reply-content-wrapper">
                                <div class="comment-header">
                                    <span class="comment-author">美食探索家</span>
                                    <span class="comment-time">2天前</span>
                                </div>
                                <div class="reply-content">
                                    <span class="reply-to">@咖啡爱好者</span> 蒜蓉要先用热油爆香，再加少许生抽和蚝油，最后撒点葱花，这样会特别香！
                                </div>
                                <div class="comment-actions">
                                    <button class="comment-action like-comment">
                                        <i class="far fa-heart"></i> 8
                                    </button>
                                    <button class="comment-action reply-btn">
                                        <i class="far fa-reply"></i> 回复
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 回复输入框 (默认隐藏) -->
                        <div class="reply-input-container" style="display: none;">
                            <input type="text" class="reply-input" placeholder="回复 @咖啡爱好者...">
                            <button class="send-reply">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 评论2 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/91/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content-wrapper">
                    <div class="comment-header">
                        <span class="comment-author">摄影初学者</span>
                        <span class="comment-time">3天前</span>
                    </div>
                    <div class="comment-content">
                        不仅菜做得好，拍照技术也一流啊！请问用什么设备拍的？光线处理得很棒
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action like-comment">
                            <i class="far fa-heart"></i> 15
                        </button>
                        <button class="comment-action reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </button>
                    </div>
                    
                    <!-- 评论2的回复 -->
                    <div class="replies-container">
                        <!-- 回复输入框 (默认隐藏) -->
                        <div class="reply-input-container" style="display: none;">
                            <input type="text" class="reply-input" placeholder="回复 @摄影初学者...">
                            <button class="send-reply">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 评论3 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/24/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content-wrapper">
                    <div class="comment-header">
                        <span class="comment-author">深夜读书馆</span>
                        <span class="comment-time">3天前</span>
                    </div>
                    <div class="comment-content">
                        麻婆豆腐看起来很正宗！请问用的是哪种豆腐？我每次做都容易碎
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action like-comment">
                            <i class="far fa-heart"></i> 9
                        </button>
                        <button class="comment-action reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </button>
                    </div>
                    
                    <!-- 评论3的回复 -->
                    <div class="replies-container">
                        <!-- 回复输入框 (默认隐藏) -->
                        <div class="reply-input-container" style="display: none;">
                            <input type="text" class="reply-input" placeholder="回复 @深夜读书馆...">
                            <button class="send-reply">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多评论 -->
        <button class="load-more-comments" id="loadMoreComments">
            查看更多评论
        </button>
    </div>
    
    <!-- 图片查看器 -->
    <div class="image-viewer" id="imageViewer">
        <button class="close-viewer" id="closeViewer">
            <i class="fas fa-times"></i>
        </button>
        <img src="" alt="大图查看" class="viewer-image" id="viewerImage">
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-comments"></i>
            <span>树洞</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="far fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 模拟更多评论数据
        const moreComments = [
            {
                id: 4,
                user: {
                    name: "健身小白",
                    avatar: "https://picsum.photos/id/823/100/100"
                },
                time: "3天前",
                content: "看起来热量好高啊，不过为了这么美味的食物，偶尔放纵一下也值得！",
                likes: 7,
                replies: []
            },
            {
                id: 5,
                user: {
                    name: "孤独的旅行者",
                    avatar: "https://picsum.photos/id/64/100/100"
                },
                time: "3天前",
                content: "请问番茄牛腩需要哪些香料？我下周也想试试做",
                likes: 11,
                replies: [
                    {
                        user: {
                            name: "美食探索家",
                            avatar: "https://picsum.photos/id/342/100/100"
                        },
                        time: "3天前",
                        content: "主要需要八角、桂皮和香叶，简单的三种就够了，太多会抢味",
                        likes: 3
                    }
                ]
            }
        ];
        
        // DOM元素
        const backBtn = document.getElementById("backBtn");
        const moreBtn = document.getElementById("moreBtn");
        const likeBtn = document.querySelector(".like-btn");
        const commentBtn = document.querySelector(".comment-btn");
        const shareBtn = document.querySelector(".share-btn");
        const bookmarkBtn = document.querySelector(".bookmark-btn");
        const followBtn = document.querySelector(".follow-btn");
        const sendCommentBtn = document.querySelector(".send-comment");
        const commentInput = document.querySelector(".comment-input");
        const replyBtns = document.querySelectorAll(".reply-btn");
        const sendReplyBtns = document.querySelectorAll(".send-reply");
        const likeCommentBtns = document.querySelectorAll(".like-comment");
        const loadMoreCommentsBtn = document.getElementById("loadMoreComments");
        const commentsList = document.querySelector(".comments-list");
        const postImages = document.querySelectorAll(".post-image");
        const imageViewer = document.getElementById("imageViewer");
        const viewerImage = document.getElementById("viewerImage");
        const closeViewer = document.getElementById("closeViewer");
        
        // 初始化事件监听
        function init() {
            setupEventListeners();
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 返回按钮
            backBtn.addEventListener("click", () => {
                history.back();
            });
            
            // 更多操作按钮
            moreBtn.addEventListener("click", () => {
                alert("更多操作：举报、拉黑、分享到...");
            });
            
            // 点赞功能
            likeBtn.addEventListener("click", () => {
                const icon = likeBtn.querySelector("i");
                const countEl = likeBtn.querySelector("span");
                let count = parseInt(countEl.textContent);
                
                if (icon.classList.contains("far")) {
                    icon.classList.remove("far");
                    icon.classList.add("fas");
                    likeBtn.classList.add("liked");
                    countEl.textContent = count + 1;
                } else {
                    icon.classList.remove("fas");
                    icon.classList.add("far");
                    likeBtn.classList.remove("liked");
                    countEl.textContent = count - 1;
                }
            });
            
            // 评论按钮聚焦到输入框
            commentBtn.addEventListener("click", () => {
                commentInput.focus();
            });
            
            // 分享功能
            shareBtn.addEventListener("click", () => {
                alert("分享到微信、QQ、微博等平台");
            });
            
            // 收藏功能
            bookmarkBtn.addEventListener("click", () => {
                const icon = bookmarkBtn.querySelector("i");
                if (icon.classList.contains("far")) {
                    icon.classList.remove("far");
                    icon.classList.add("fas");
                    alert("已收藏");
                } else {
                    icon.classList.remove("fas");
                    icon.classList.add("far");
                    alert("已取消收藏");
                }
            });
            
            // 关注功能
            followBtn.addEventListener("click", () => {
                followBtn.classList.toggle("following");
                if (followBtn.classList.contains("following")) {
                    followBtn.innerHTML = '<i class="fas fa-check"></i> 已关注';
                } else {
                    followBtn.innerHTML = '<i class="fas fa-plus"></i> 关注';
                }
            });
            
            // 发送评论
            sendCommentBtn.addEventListener("click", sendComment);
            commentInput.addEventListener("keydown", (e) => {
                if (e.key === "Enter" && !e.shiftKey) {
                    e.preventDefault();
                    sendComment();
                }
            });
            
            // 回复按钮
            replyBtns.forEach(btn => {
                btn.addEventListener("click", function() {
                    const commentItem = this.closest(".comment-content-wrapper") || this.closest(".reply-content-wrapper");
                    const repliesContainer = commentItem.nextElementSibling;
                    const replyInputContainer = repliesContainer.querySelector(".reply-input-container");
                    
                    // 隐藏其他所有回复框
                    document.querySelectorAll(".reply-input-container").forEach(container => {
                        if (container !== replyInputContainer) {
                            container.style.display = "none";
                        }
                    });
                    
                    // 切换当前回复框显示状态
                    replyInputContainer.style.display = replyInputContainer.style.display === "flex" ? "none" : "flex";
                    
                    // 聚焦到输入框
                    if (replyInputContainer.style.display === "flex") {
                        replyInputContainer.querySelector(".reply-input").focus();
                    }
                });
            });
            
            // 发送回复
            sendReplyBtns.forEach(btn => {
                btn.addEventListener("click", function() {
                    const replyInputContainer = this.parentElement;
                    const replyInput = replyInputContainer.querySelector(".reply-input");
                    const replyText = replyInput.value.trim();
                    
                    if (replyText) {
                        sendReply(replyInputContainer, replyText);
                    }
                });
                
                // 回车键发送回复
                const replyInput = btn.parentElement.querySelector(".reply-input");
                replyInput.addEventListener("keydown", (e) => {
                    if (e.key === "Enter" && replyInput.value.trim()) {
                        e.preventDefault();
                        sendReply(btn.parentElement, replyInput.value.trim());
                    }
                });
            });
            
            // 评论点赞
            likeCommentBtns.forEach(btn => {
                btn.addEventListener("click", function() {
                    const icon = this.querySelector("i");
                    const countText = this.childNodes[2].textContent.trim();
                    let count = parseInt(countText);
                    
                    if (icon.classList.contains("far")) {
                        icon.classList.remove("far");
                        icon.classList.add("fas");
                        this.classList.add("liked");
                        this.innerHTML = `<i class="fas fa-heart"></i> ${count + 1}`;
                    } else {
                        icon.classList.remove("fas");
                        icon.classList.add("far");
                        this.classList.remove("liked");
                        this.innerHTML = `<i class="far fa-heart"></i> ${count - 1}`;
                    }
                });
            });
            
            // 加载更多评论
            loadMoreCommentsBtn.addEventListener("click", loadMoreComments);
            
            // 图片查看功能
            postImages.forEach(img => {
                img.addEventListener("click", () => {
                    viewerImage.src = img.src;
                    imageViewer.classList.add("active");
                    document.body.style.overflow = "hidden"; // 防止背景滚动
                });
            });
            
            // 关闭图片查看器
            closeViewer.addEventListener("click", () => {
                imageViewer.classList.remove("active");
                document.body.style.overflow = ""; // 恢复滚动
            });
            
            // 点击图片查看器背景关闭
            imageViewer.addEventListener("click", (e) => {
                if (e.target === imageViewer) {
                    imageViewer.classList.remove("active");
                    document.body.style.overflow = "";
                }
            });
        }
        
        // 发送评论
        function sendComment() {
            const commentText = commentInput.value.trim();
            if (!commentText) return;
            
            // 创建新评论元素
            const newComment = document.createElement("div");
            newComment.className = "comment-item";
            newComment.innerHTML = `
                <img src="https://picsum.photos/id/64/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content-wrapper">
                    <div class="comment-header">
                        <span class="comment-author">我</span>
                        <span class="comment-time">刚刚</span>
                    </div>
                    <div class="comment-content">
                        ${commentText}
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action like-comment">
                            <i class="far fa-heart"></i> 0
                        </button>
                        <button class="comment-action reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </button>
                    </div>
                    
                    <!-- 评论的回复容器 -->
                    <div class="replies-container">
                        <!-- 回复输入框 (默认隐藏) -->
                        <div class="reply-input-container" style="display: none;">
                            <input type="text" class="reply-input" placeholder="回复...">
                            <button class="send-reply">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
            
            // 添加到评论列表顶部
            commentsList.insertBefore(newComment, commentsList.firstChild);
            
            // 清空输入框
            commentInput.value = "";
            
            // 更新评论数量
            updateCommentsCount(1);
            
            // 为新评论绑定事件
            const newLikeBtn = newComment.querySelector(".like-comment");
            const newReplyBtn = newComment.querySelector(".reply-btn");
            const newSendReplyBtn = newComment.querySelector(".send-reply");
            
            newLikeBtn.addEventListener("click", function() {
                const icon = this.querySelector("i");
                const countText = this.childNodes[2].textContent.trim();
                let count = parseInt(countText);
                
                if (icon.classList.contains("far")) {
                    icon.classList.remove("far");
                    icon.classList.add("fas");
                    this.classList.add("liked");
                    this.innerHTML = `<i class="fas fa-heart"></i> ${count + 1}`;
                } else {
                    icon.classList.remove("fas");
                    icon.classList.add("far");
                    this.classList.remove("liked");
                    this.innerHTML = `<i class="far fa-heart"></i> ${count - 1}`;
                }
            });
            
            newReplyBtn.addEventListener("click", function() {
                const repliesContainer = this.closest(".comment-content-wrapper").nextElementSibling;
                const replyInputContainer = repliesContainer.querySelector(".reply-input-container");
                
                // 隐藏其他所有回复框
                document.querySelectorAll(".reply-input-container").forEach(container => {
                    if (container !== replyInputContainer) {
                        container.style.display = "none";
                    }
                });
                
                // 切换当前回复框显示状态
                replyInputContainer.style.display = replyInputContainer.style.display === "flex" ? "none" : "flex";
                
                // 聚焦到输入框
                if (replyInputContainer.style.display === "flex") {
                    replyInputContainer.querySelector(".reply-input").focus();
                }
            });
            
            newSendReplyBtn.addEventListener("click", function() {
                const replyInputContainer = this.parentElement;
                const replyInput = replyInputContainer.querySelector(".reply-input");
                const replyText = replyInput.value.trim();
                
                if (replyText) {
                    sendReply(replyInputContainer, replyText);
                }
            });
        }
        
        // 发送回复
        function sendReply(replyInputContainer, replyText) {
            const repliesContainer = replyInputContainer.parentElement;
            const replyTo = replyInputContainer.querySelector(".reply-input").placeholder.split("@")[1].split("...")[0];
            
            // 创建新回复元素
            const newReply = document.createElement("div");
            newReply.className = "reply-item";
            newReply.innerHTML = `
                <img src="https://picsum.photos/id/64/100/100" alt="回复者头像" class="comment-avatar">
                <div class="reply-content-wrapper">
                    <div class="comment-header">
                        <span class="comment-author">我</span>
                        <span class="comment-time">刚刚</span>
                    </div>
                    <div class="reply-content">
                        <span class="reply-to">@${replyTo}</span> ${replyText}
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action like-comment">
                            <i class="far fa-heart"></i> 0
                        </button>
                        <button class="comment-action reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </button>
                    </div>
                </div>
            `;
            
            // 添加到回复列表顶部
            repliesContainer.insertBefore(newReply, replyInputContainer);
            
            // 清空输入框并隐藏
            replyInputContainer.querySelector(".reply-input").value = "";
            replyInputContainer.style.display = "none";
            
            // 更新评论数量
            updateCommentsCount(1);
            
            // 为新回复绑定事件
            const newLikeBtn = newReply.querySelector(".like-comment");
            newLikeBtn.addEventListener("click", function() {
                const icon = this.querySelector("i");
                const countText = this.childNodes[2].textContent.trim();
                let count = parseInt(countText);
                
                if (icon.classList.contains("far")) {
                    icon.classList.remove("far");
                    icon.classList.add("fas");
                    this.classList.add("liked");
                    this.innerHTML = `<i class="fas fa-heart"></i> ${count + 1}`;
                } else {
                    icon.classList.remove("fas");
                    icon.classList.add("far");
                    this.classList.remove("liked");
                    this.innerHTML = `<i class="far fa-heart"></i> ${count - 1}`;
                }
            });
        }
        
        // 加载更多评论
        function loadMoreComments() {
            // 显示加载状态
            loadMoreCommentsBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                moreComments.forEach(comment => {
                    // 创建评论元素
                    let commentHtml = `
                        <div class="comment-item">
                            <img src="${comment.user.avatar}" alt="评论者头像" class="comment-avatar">
                            <div class="comment-content-wrapper">
                                <div class="comment-header">
                                    <span class="comment-author">${comment.user.name}</span>
                                    <span class="comment-time">${comment.time}</span>
                                </div>
                                <div class="comment-content">
                                    ${comment.content}
                                </div>
                                <div class="comment-actions">
                                    <button class="comment-action like-comment">
                                        <i class="far fa-heart"></i> ${comment.likes}
                                    </button>
                                    <button class="comment-action reply-btn">
                                        <i class="far fa-reply"></i> 回复
                                    </button>
                                </div>
                                
                                <div class="replies-container">
                    `;
                    
                    // 添加回复
                    comment.replies.forEach(reply => {
                        commentHtml += `
                            <div class="reply-item">
                                <img src="${reply.user.avatar}" alt="回复者头像" class="comment-avatar">
                                <div class="reply-content-wrapper">
                                    <div class="comment-header">
                                        <span class="comment-author">${reply.user.name}</span>
                                        <span class="comment-time">${reply.time}</span>
                                    </div>
                                    <div class="reply-content">
                                        ${reply.content}
                                    </div>
                                    <div class="comment-actions">
                                        <button class="comment-action like-comment">
                                            <i class="far fa-heart"></i> ${reply.likes}
                                        </button>
                                        <button class="comment-action reply-btn">
                                            <i class="far fa-reply"></i> 回复
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                    
                    // 添加回复输入框
                    commentHtml += `
                            <!-- 回复输入框 (默认隐藏) -->
                            <div class="reply-input-container" style="display: none;">
                                <input type="text" class="reply-input" placeholder="回复 @${comment.user.name}...">
                                <button class="send-reply">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                `;
                    
                    // 创建DOM元素并添加到列表
                    const tempDiv = document.createElement("div");
                    tempDiv.innerHTML = commentHtml;
                    const newComment = tempDiv.firstElementChild;
                    commentsList.appendChild(newComment);
                    
                    // 为新评论绑定事件
                    const likeBtn = newComment.querySelector(".like-comment");
                    const replyBtn = newComment.querySelector(".reply-btn");
                    const sendReplyBtn = newComment.querySelector(".send-reply");
                    
                    if (likeBtn) {
                        likeBtn.addEventListener("click", function() {
                            const icon = this.querySelector("i");
                            const countText = this.childNodes[2].textContent.trim();
                            let count = parseInt(countText);
                            
                            if (icon.classList.contains("far")) {
                                icon.classList.remove("far");
                                icon.classList.add("fas");
                                this.classList.add("liked");
                                this.innerHTML = `<i class="fas fa-heart"></i> ${count + 1}`;
                            } else {
                                icon.classList.remove("fas");
                                icon.classList.add("far");
                                this.classList.remove("liked");
                                this.innerHTML = `<i class="far fa-heart"></i> ${count - 1}`;
                            }
                        });
                    }
                    
                    if (replyBtn) {
                        replyBtn.addEventListener("click", function() {
                            const repliesContainer = this.closest(".comment-content-wrapper").nextElementSibling;
                            const replyInputContainer = repliesContainer.querySelector(".reply-input-container");
                            
                            // 隐藏其他所有回复框
                            document.querySelectorAll(".reply-input-container").forEach(container => {
                                if (container !== replyInputContainer) {
                                    container.style.display = "none";
                                }
                            });
                            
                            // 切换当前回复框显示状态
                            replyInputContainer.style.display = replyInputContainer.style.display === "flex" ? "none" : "flex";
                            
                            // 聚焦到输入框
                            if (replyInputContainer.style.display === "flex") {
                                replyInputContainer.querySelector(".reply-input").focus();
                            }
                        });
                    }
                    
                    if (sendReplyBtn) {
                        sendReplyBtn.addEventListener("click", function() {
                            const replyInputContainer = this.parentElement;
                            const replyInput = replyInputContainer.querySelector(".reply-input");
                            const replyText = replyInput.value.trim();
                            
                            if (replyText) {
                                sendReply(replyInputContainer, replyText);
                            }
                        });
                    }
                });
                
                // 恢复按钮状态
                loadMoreCommentsBtn.textContent = "没有更多评论了";
                loadMoreCommentsBtn.disabled = true;
                loadMoreCommentsBtn.style.opacity = "0.7";
                
                // 更新评论数量
                updateCommentsCount(moreComments.length);
            }, 1000);
        }
        
        // 更新评论数量
        function updateCommentsCount(change) {
            const countEl = document.querySelector(".comments-count");
            const currentCount = parseInt(countEl.textContent.replace(/[()]/g, ""));
            countEl.textContent = `(${currentCount + change})`;
            
            // 更新顶部评论按钮数量
            const commentBtnCount = document.querySelector(".comment-btn span");
            commentBtnCount.textContent = parseInt(commentBtnCount.textContent) + change;
        }
        
        // 初始化页面
        document.addEventListener("DOMContentLoaded", init);
    </script>
</body>
</html>
